<template>
	<view class="main-body" :style="{backgroundImage:'url('+picUrl+'/static/img/bac2.jpg)'}">
		<view class="zai-box">
			<!-- <scroll-view scroll-y class="page"> -->
			<view class="text-center">
				<view class="zai-title text-shadow ">您好，欢迎使用</view>
				<view class="zai-title zai-title2">临渭区VOCs执法监管平台 </view>
			</view>
			<!-- <view class="text-center" :style="[{animation: 'show ' + 0.4+ 's 1'}]">
					<image src="https://static.jeecg.com/upload/test/login4_1595818039175.png" mode='aspectFit'
						class="zai-logo "></image>
					<view class="zai-title text-shadow ">JEECG BOOT </view>
				</view> -->
			<view class="box login-paddingtop" :style="[{animation: 'show ' + 0.6+ 's 1'}]">
				<block v-if="loginWay==1">
					<!-- <view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
							<view class="title"><text class="cuIcon-people margin-right-xs"></text>账号:</view>
							<input placeholder="请输入账号" name="input" v-model="userName"></input>
						</view> -->
					<view class="cu-form-group margin-top aa" :class="[shape=='round'?'round':'']">
						<view class="biao">
							<u-icon color="#16b6b6" name="account-fill" size="25"></u-icon>
						</view>
						<input class="shurukuang uni-input pass" placeholder="请输入您的用户名" name="input"
							v-model="userName"></input>

					</view>
					<view style="width: calc(100% - 70px);margin: 0 auto;
position: relative;top:12px;
								height: 1px !important;
								background-color: #e1e6ec;"></view>
					<view style="margin-top: 47.14upx;" class="cu-form-group margin-top"
						:class="[shape=='round'?'round':'']">
						<view class="biao">
							<u-icon color="#16b6b6" name="lock-fill" size="25"></u-icon>
						</view>
						<input class="shurukuang uni-input pass" placeholder="请输入您的密码" :password="!showPassword"
							v-model="password" />
						<view class="biao" style="width: 20px;" @click="changePassword"
							:class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']">
							<!-- <text v-if="showPassword" >
									<u-icon :color="#849af9" name="eye-fill" size="20"></u-icon>
								</text> -->
							<!-- <u-icon v-if="!showPassword" color="#849af9" name="eye-fill" size="20"></u-icon>
								<u-icon v-if="showPassword" color="#849af9" name="eye-off" size="20"></u-icon> -->
						</view>
						<!-- <view class="action text-lg">
								<text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']"
									@click="changePassword"></text>
							</view> -->
					</view>

					<!-- <view style="margin-top: 47.14upx;" class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
							<view class="title"><text class="cuIcon-lock margin-right-xs"></text>密码:</view>
							<input class="uni-input" placeholder="请输入您的密码" :password="!showPassword" v-model="password" />
							<view class="action text-lg">
								<text :class="[showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid']"
									@click="changePassword"></text>
							</view>
						</view> -->
					<view class="padding text-center margin-top" style="margin-top: 50px;">
						<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading"
							:class="[shape=='round'?'round':'']" @tap="onLogin"><text
								space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
						</button>
						<!-- <button class="cu-btn line-blue lg margin-left shadow" :loading="loading"
								:class="[shape=='round'?'round':'']" @tap="loginWay=3-loginWay">短信登录
							</button> -->
					</view>
				</block>
				<block v-else>
					<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-mobile margin-right-xs"></text>手机号:</view>
						<input placeholder="请输入手机号" type="number" maxlength="11" v-model="phoneNo"></input>
					</view>
					<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
						<view class="title"><text class="cuIcon-lock margin-right-xs"></text>验证码:</view>
						<input class="uni-input" placeholder="请输入验证码" v-model="smsCode" />
						<view class="action">
							<button class="cu-btn line-blue sm" :disabled="!isSendSMSEnable" @click="onSMSSend">
								{{ getSendBtnText }}</button>
						</view>
					</view>
					<view class="padding text-center margin-top">
						<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading"
							:class="[shape=='round'?'round':'']" @tap="onSMSLogin"><text
								space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
						</button>
						<button class="cu-btn line-blue lg margin-left shadow" :loading="loading"
							:class="[shape=='round'?'round':'']" @tap="loginWay=1">账户登录
						</button>
					</view>
				</block>


				<!-- #ifdef APP-PLUS -->
				<!-- <view class="padding flex flex-direction  text-center">
						当前版本:{{version}}
					</view> -->
				<!-- #endif -->

			</view>
			<!-- </scroll-view> -->
			<!-- 登录加载弹窗 -->
			<!-- <view class="cu-load load-modal" v-if="loading">
				<image src="https://static.jeecg.com/upload/test/login4_1595818039175.png" mode="aspectFit"
					class="round"></image>
				<view class="gray-text">登录中...</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	import {
		ACCESS_TOKEN,
		USER_NAME,
		USER_INFO
	} from "@/common/util/constants"
	import {
		mapActions
	} from "vuex"
	import configService from '@/common/service/config.service.js';

	export default {
		data() {
			return {
				shape: '', //round 圆形
				//保存OpenId接口url
				dataUrl: '/pollution/saveAuthInfo', 
				picUrl: configService.picURL,
				loading: false,
				userName: '',
				password: '',
				phoneNo: '',
				smsCode: '',
				showPassword: false, //是否显示明文
				loginWay: 1, //1: 账密，2：验证码
				smsCountDown: 0,
				smsCountInterval: null,
				toggleDelay: false,
				version: '',
				//第三方登录相关信息
				thirdType: "",
				thirdLoginInfo: "",
				thirdLoginState: false,
				bindingPhoneModal: false,
				thirdUserUuid: '',
				// url: {
				// 	bindingThirdPhone: '/sys/thirdLogin/bindingThirdPhone'
				// }
			};
		},
		onLoad: function() {
			
			// #ifdef APP-PLUS

			plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
				that.version = wgtinfo.version
			});
			// #endif
		},
		computed: {
			isSendSMSEnable() {
				return this.smsCountDown <= 0 && this.phoneNo.length > 4;
			},
			getSendBtnText() {
				if (this.smsCountDown > 0) {
					return this.smsCountDown + '秒后发送';
				} else {
					return '发送验证码';
				}
			},
			canSMSLogin() {
				return this.userName.length > 4 && this.smsCode.length > 4;
			},
			canPwdLogin() {
				return this.userName.length > 4 && this.password.length > 4;
			},
		},
		methods: {
			...mapActions(["mLogin", "PhoneLogin", "ThirdLogin", "validateLogin"]),
			validateIndex: function(openId) {
				// let obj = {
				// 	openId: openId,
				// }
				this.validateLogin(openId).then((res) => {
					console.log(res)
					if (res.data.code == 500) {
						if (!res.data.success) {
							
							// #ifdef APP-PLUS
							// this.$tip.success('登录成功!')
							this.$Router.replaceAll({
								name: 'index2'
							})
							// #endif
							// #ifndef APP-PLUS
							this.$Router.replaceAll({
								name: 'index2'
							})
							// #endif
						}

					} else {
						this.$tip.alert(res.data.message);
					}

				}).catch((err) => {
					let msg = err.data.message || "请求出现错误，请稍后再试"
					this.$tip.alert(msg);
				}).finally(() => {

				})
			},
			//保存openid
			saveOpenId(){
				// let params = {
				// 	openId:
				// }
				console.log(this.$store.getters.openid)
				let url = this.dataUrl+'?openId='+this.$store.getters.openid+'&username='+this.userName
				this.$http.post(url).then(res => {
					console.log(res)
					
					if (res.data.code == 200) {
						
					}
				
				}).catch((error) => {
					console.log(error)
				
				});
				
			},
			onLogin: function() {
				if (!this.userName || this.userName.length == 0) {
					this.$tip.toast('请填写用户名');
					return;
				}
				if (!this.password || this.password.length == 0) {
					this.$tip.toast('请填写密码');
					return;
				}
				let loginParams = {
					username: this.userName,
					password: this.password
				}
				this.loading = true;
				// this.$tip.success('登录成功!')
				// this.$Router.replaceAll({
				// 	name: 'index2'
				// })
				this.mLogin(loginParams).then((res) => {
					this.loading = false;
					console.log(res)

					if (res.data.success) {
						this.saveOpenId()
						// #ifdef APP-PLUS
						// this.$tip.success('登录成功!')
						this.$Router.replaceAll({
							name: 'index2'
						})
						// this.saveClientId()
						// #endif
						// #ifndef APP-PLUS
						this.$Router.replaceAll({
							name: 'index2'
						})
						// this.$tip.success('登录成功!')
						// this.$Router.replaceAll({
						// 	name: 'index'
						// })
						// #endif
					} else {
						this.$tip.alert(res.data.message);
					}
				}).catch((err) => {
					let msg = err.data.message || "请求出现错误，请稍后再试"
					this.loading = false;
					this.$tip.alert(msg);
				}).finally(() => {
					this.loading = false;
				})
			},
			saveClientId() {
				var info = plus.push.getClientInfo();
				var cid = info.clientid;
				this.$http.get("/sys/user/saveClientId", {
					params: {
						clientId: cid
					}
				}).then(res => {
					console.log("res::saveClientId>", res)
					this.$tip.success('登录成功!')
					this.$Router.replaceAll({
						name: 'index'
					})
				})
			},
			changePassword() {
				this.showPassword = !this.showPassword;
			},
			onSMSSend() {
				let smsParams = {};
				smsParams.mobile = this.phoneNo;
				smsParams.smsmode = "0";
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);
				if (!smsParams.mobile || smsParams.mobile.length == 0) {
					this.$tip.toast('请输入手机号');
					return false
				}
				if (!checkPhone.test(smsParams.mobile)) {
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				this.$http.post("/sys/sms", smsParams).then(res => {
					if (res.data.success) {
						this.smsCountDown = 60;
						this.startSMSTimer();
					} else {
						this.smsCountDown = 0;
						this.$tip.toast(res.data.message);
					}
				});
			},
			startSMSTimer() {
				this.smsCountInterval = setInterval(() => {
					this.smsCountDown--;
					if (this.smsCountDown <= 0) {
						clearInterval(this.smsCountInterval);
					}
				}, 1000);
			},
			onSMSLogin() {
				let checkPhone = new RegExp(/^[1]([3-9])[0-9]{9}$/);

				if (!this.phoneNo || this.phoneNo.length == 0) {
					this.$tip.toast('请填写手机号');
					return;
				}
				if (!checkPhone.test(this.phoneNo)) {
					this.$tip.toast('请输入正确的手机号');
					return false
				}
				if (!this.smsCode || this.smsCode.length == 0) {
					this.$tip.toast('请填短信验证码');
					return;
				}
				let loginParams = {
					mobile: this.phoneNo,
					captcha: this.smsCode
				};
				this.PhoneLogin(loginParams).then((res) => {
					console.log("res====》", res)
					if (res.data.success) {
						this.$tip.success('登录成功!')
						this.$Router.replaceAll({
							name: 'index'
						})
					} else {
						this.$tip.error(res.data.message);
					}
				}).catch((err) => {
					let msg = ((err.response || {}).data || {}).message || err.data.message || "请求出现错误，请稍后再试"
					this.$tip.error(msg);
				});
			},
			loginSuccess() {
				// 登陆成功，重定向到主页
				this.$Router.replace({
					name: 'index'
				})
			},
			requestFailed(err) {
				this.$message.warning("登录失败")
			},
		},
		beforeDestroy() {
			if (this.smsCountInterval) {
				clearInterval(this.smsCountInterval);
			}
		},
	}
</script>

<style scoped>
	.main-body {
		width: 100vw;
		height: 100vh;
		overflow: hidden;
		/* background: url(`${picUrl}/static/img/bac2.jpg`); */
		background-size: 100% 100%;
	}

	.login-paddingtop {
		margin-top: 135upx;
	}

	.zai-box {
		padding: 0 79upx;
		padding-top: 232.85upx;
		position: relative;
	}

	.zai-logo {
		width: 200upx;
		height: 150px;
	}

	.box {
		width: 100%;
		height: 577.14upx;
		background-color: #fff;
		border-radius: 21.42upx;
		padding-top: 9%;
		/* opacity: 0.3; */
	}

	.zai-title {
		/* width: 574px; */
		height: 56.42upx;
		font-family: MicrosoftYaHei;
		font-size: 57.14upx;
		font-weight: bold;
		font-stretch: normal;
		line-height: 56.42upx;
		letter-spacing: 0px;
		color: #008861;
		/* font-size: 58upx;
		color: #000000; */
		/* text-align: center; */
	}

	.zai-title2 {
		margin-top: 38.57upx;
		height: 43.57upx;
		font-size: 42.85upx;
		line-height: 35.71upx;
	}

	.input-placeholder,
	.zai-input {
		color: #94afce;
	}

	.input-placeholder {
		color: #202555;
	}


	.zai-label {
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}

	.zai-btn {
		background: #ff65a3;
		color: #fff;
		border: 0;
		border-radius: 100upx;
		font-size: 36upx;
	}

	.zai-btn:after {
		border: 0;
	}

	/*按钮点击效果*/
	.zai-btn.button-hover {
		transform: translate(1upx, 1upx);
	}

	.cu-btn {
		width: 100%;
		/* width: calc(100% - 70upx); */
		height: 90.71upx;
		/* background-color: #1bc7ff; */
		background-image: linear-gradient(0deg,
				#009cdd 0%,
				#29cd94 100%),
			linear-gradient(#1082ff,
				#1082ff);
		background-blend-mode: normal,
			normal;
		box-shadow: 0px 9px 21px 0px rgba(16, 130, 255, 0.37);
		border-radius: 45upx;
	}

	.cu-btn /deep/ span {
		/* color:#fff; */
		font-size: 38.57upx;
		color: #ffffff;
		line-height: 90.71upx;
	}

	.cu-form-group {
		width: calc(100% - 36px);
		height: 90.71upx;
		background-color: #ffffff;
		border-radius: 45upx;
		opacity: 0.4;
		padding: 0 35.71upx;
		margin: 0 35upx;
		border: none;
		/* .title {
			display: inline;
		} */
	}

	.biao {
		display: inline-block;
		width: 30px;

		height: 90.71upx;
		line-height: 90.71upx;
		float: left;
		/* 	align-items: center; */
	}

	.biao /deep/ .u-icon {
		height: 100%;
	}

	.pass {
		width: calc(100% - 50px);
	}

	.shurukuang {
		display: inline-block;
		height: 90.71upx;
		float: left;
		/* 	line-height:90.71upx;
		align-items: center; */
	}

	.aa /deep/ .uni-input-input {
		width: calc(100% - 20px);
	}
</style>
